<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let obj = {
          abc:'123',
          name:{aa:'abc'},
          arr:['吃','喝','玩']
        }
        let handler = {
          //target原对象
          get(target,key){
            console.log('获取')
            //递归代理，只有取到对应值的时候 才会进行代理
            if(typeof target[key] === 'object' && target[key] !== null){
                return new Proxy(target[key],handler)
            }
            return Reflect.get(target,key);//反射
            // return target[key]
          },
          set(target,key,value){
            // console.log('设置')
            //数组：先改索引，再改长度
            let oldValue = target[key];
            console.log(key,oldValue,value)
            if(!oldValue){
                console.log('新增属性')
            }else if(oldValue !== value){
                console.log('修改属性')
            }
            return Reflect.set(target,key,value);//设置不成功有返回值
            // target[key] = value
          }
        }
        // Object.defineProperty => Reflect.defineProperty
        let proxy = new Proxy(obj,handler)
        // proxy.abc = 'dev'
        // console.log(proxy.abc)
        
        //懒代理
        // proxy.name.aa = 'hello'//走两次
        // proxy.arr.push(123)
        // proxy.arr[0] = 100
        // proxy.xxx = 100 //不存在的属性是新增
    </script>
</body>
</html>